<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
    <style>
        body{background-color:#DDD};
        /* 使用关键字 */
        p.bold-text {
          font-weight: bold;
        }

        /* 使用数值 */
        p.bold-text-700 {
          font-weight: 700;
        }
        .line_1{fill:#FFF;fill-opacity:0;stroke-width:4;stroke:rgb(0,0,0)}
        .line_2{fill:#FFF;fill-opacity:0;stroke-width:4;stroke:gold}
        .line_3{fill:#FFF;fill-opacity:0;stroke-width:6;stroke:gold;opacity:0.75}
        .f2{color:rgb(255,255,150)}
        .hollow-text {
          /* 设置文字空心 */
          -webkit-text-stroke: 1px black;
          color: white;
          text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
          text-shadow: 0 -1px blue;
        }
        .f3 {font-size:6em;}
    </style>
</head>
<body style="zoom:1.84" >
整体效果: <a href="javascript:void(0);" onclick="saveSVGAsPNG('svg1', '整体效果.jpg');" >导出图片</a><br/>
<div id="svg1"><svg width="1000px" height="450px" style="border: 0px solid red; margin: 0px;">
    <rect width="100%" height="100%" style="fill:#FFF"/>
    <circle cx="0" cy="0" r="6" fill="black" />
    <circle cx="0" cy="450" r="6" fill="black" />
    <circle cx="1000" cy="0" r="6" fill="black" />
    <circle cx="1000" cy="450" r="6" fill="black" />

    <defs>
        <mask id="yk" x="0" y="0" width="100%" height="100%">
            <rect x="25" y="25" width="950" height="400" fill="white" />
            <rect x="180" y="55" width="640" height="340" fill="black" />
            <rect x="55" y="90" width="890" height="270" fill="black" />
        </mask>
        <filter id="invertColors" x="0" y="0" width="100%" height="100%">
            <feColorMatrix type="matrix" values="-1 0 0 0 1
                                            0 -1 0 0 1
                                            0 0 -1 0 1
                                            0 0 0 1 0"/>
        </filter>
        <mask id="maskA1">
            <image x="130" y="165" width="120" height="120" xlink:href="https://static.linpengfei.cn/rmb/a1.jpg"  filter="url(#invertColors)"/>
        </mask>
        <mask id="maskA2">
            <image x="750" y="165" width="120" height="120" xlink:href="https://static.linpengfei.cn/rmb/a2.png"  filter="url(#invertColors)"/>
        </mask>
        <mask id="xy">
            <image  x="292" y="91" width="420" height="420" xlink:href="https://static.linpengfei.cn/rmb/xyb.jpg"  filter="url(#invertColors)"/>
        </mask>
    </defs>

    <!-- 外框遮罩 -->
    <rect x="0" y="0" width="100%" height="100%" fill="#CCC" mask="url(#yk)" />
    <rect x="25" y="25" width="950" height="400" fill="gold" class="line_2"/>
    <polyline points="55 90,180 90,180 55,820 55,820 90,945 90,945 360,820 360,820 395,180 395,180 360,55 360,55 90" class="line_2" />
    <text text-anchor="middle" fill="gold" x="100" y="77" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="100" y="412" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="900" y="77" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="900" y="412" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="810" y="260" font-size="100">20</text><!-- 右侧中间数字 -->
    <text text-anchor="middle" fill="gold" x="500" y="50" font-size="25">FEDERAL RESERVE NOTE</text>
    <text text-anchor="middle" fill="gold" x="500" y="419" font-size="25">TWENTY DOLLARS</text>

    <!-- 左侧印章 -->
    <circle cx="190" cy="225" r="60" fill="gold" mask="url(#maskA1)"/>
    <!-- 右侧印章 -->
    <circle cx="810" cy="225" r="60" fill="gold" mask="url(#maskA2)"/>


    <!-- 阻焊层 -->
    <!-- 阻焊层 头像框 -->
    <circle cx="500" cy="240" r="148" class="line_3" />
    <text x="595" y="385" font-size="25" fill="#CC9">SERIES 2024.12.12</text>
    <rect x="25" y="25" width="950" height="400" fill="gold" class="line_2"/>
    <polyline points="55 90,180 90,180 55,820 55,820 90,945 90,945 360,820 360,820 395,180 395,180 360,55 360,55 90" class="line_2" />
    <text text-anchor="middle" fill="gold" x="100" y="77" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="100" y="412" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="900" y="77" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="900" y="412" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="810" y="260" font-size="100">20</text><!-- 右侧中间数字 -->
    <text text-anchor="middle" fill="gold" x="500" y="50" font-size="25">FEDERAL RESERVE NOTE</text>
    <text text-anchor="middle" fill="gold" x="500" y="419" font-size="25">TWENTY DOLLARS</text>


    <!-- 丝印层 -->
    <!-- 丝印层 头像 -->
    <circle cx="500" cy="240" r="145" mask="url(#xy)"/>

    <text text-anchor="middle" x="250" y="419" font-size="25">USD 20</text>
    <text text-anchor="middle" x="750" y="419" font-size="25">USD 20</text>
    <text text-anchor="middle" x="250" y="50" font-size="25">USD 20</text>
    <text text-anchor="middle" x="750" y="50" font-size="25">USD 20</text>

    <text text-anchor="middle" x="500" y="85" font-size="30">THE UNITED STATES OF AMERICA</text>
    <text x="70" y="120" font-size="16">THIS NOTE IS LEGAL TENDER</text>
    <text x="70" y="140" font-size="16">
        FOR ALL DEBTS,PUBLIC AND PRIVATE</text>
    <text x="750" y="140" font-size="25">LB 14285700T</text>
    <text x="80" y="340" font-size="25">pengfei L</text>
    <text x="750" y="340" font-size="25">Joh W Snow</text>


    <!-- 辅助线 -->
    <path d="M 0 225 L 1000 225" stroke="#AAA" stroke-width="1" stroke-dasharray="5, 5"/>
    <path d="M 500 0 L 500 450" stroke="#AAA" stroke-width="1" stroke-dasharray="5, 5" />
    <path d="M 350 0 L 350 450" stroke="#AAA" stroke-width="1" stroke-dasharray="5, 5" />
    <path d="M 650 0 L 650 450" stroke="#AAA" stroke-width="1" stroke-dasharray="5, 5" />
</svg></div>
<br/>顶层: <a href="javascript:void(0);" onclick="saveSVGAsPNG('svg2', '顶层.jpg');" >导出图片</a><br/>
<div id="svg2"><svg width="1000px" height="450px" style="border: 0px solid red; margin: 0px;">
    <rect width="100%" height="100%" style="fill:#FFF"/>
    <circle cx="0" cy="0" r="6" fill="gold" />
    <circle cx="0" cy="450" r="6" fill="gold" />
    <circle cx="1000" cy="0" r="6" fill="gold" />
    <circle cx="1000" cy="450" r="6" fill="gold" />

    <rect x="0" y="0" width="100%" height="100%" fill="#CCC" mask="url(#yk)" />
    <rect x="25" y="25" width="950" height="400" fill="gold" class="line_2"/>
    <polyline points="55 90,180 90,180 55,820 55,820 90,945 90,945 360,820 360,820 395,180 395,180 360,55 360,55 90" class="line_2" />
    <text text-anchor="middle" fill="gold" x="100" y="77" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="100" y="412" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="900" y="77" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="900" y="412" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="810" y="260" font-size="100">20</text><!-- 右侧中间数字 -->
    <text text-anchor="middle" fill="gold" x="500" y="50" font-size="25">FEDERAL RESERVE NOTE</text>
    <text text-anchor="middle" fill="gold" x="500" y="419" font-size="25">TWENTY DOLLARS</text>

    <!-- 左侧印章 -->
    <circle cx="190" cy="225" r="60" fill="gold" mask="url(#maskA1)"/>
    <!-- 右侧印章 -->
    <circle cx="810" cy="225" r="60" fill="gold" mask="url(#maskA2)"/>
</svg></div>

<br/>阻焊层: <a href="javascript:void(0);" onclick="saveSVGAsPNG('svg3', '阻焊层.jpg');" >导出图片</a><br/>
<div id="svg3"><svg  width="1000px" height="450px" style="border: 0px solid red; margin: 0px;">
    <rect width="100%" height="100%" style="fill:#FFF"/>
    <circle cx="0" cy="0" r="6" fill="gold" />
    <circle cx="0" cy="450" r="6" fill="gold" />
    <circle cx="1000" cy="0" r="6" fill="gold" />
    <circle cx="1000" cy="450" r="6" fill="gold" />

    <!-- 阻焊层 头像框 -->
    <circle cx="500" cy="240" r="148" class="line_3" />
    <text x="600" y="380" font-size="25" fill="#CC9">SERIES 2024.12.12</text>
    <rect x="25" y="25" width="950" height="400" fill="gold" class="line_2"/>
    <polyline points="55 90,180 90,180 55,820 55,820 90,945 90,945 360,820 360,820 395,180 395,180 360,55 360,55 90" class="line_2" />
    <text text-anchor="middle" fill="gold" x="100" y="77" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="100" y="412" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="900" y="77" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="900" y="412" font-size="50">20</text>
    <text text-anchor="middle" fill="gold" x="810" y="260" font-size="100">20</text><!-- 右侧中间数字 -->
    <text text-anchor="middle" fill="gold" x="500" y="50" font-size="25">FEDERAL RESERVE NOTE</text>
    <text text-anchor="middle" fill="gold" x="500" y="419" font-size="25">TWENTY DOLLARS</text>
    <!-- 左侧印章 -->
    <circle cx="190" cy="225" r="60" fill="gold" mask="url(#maskA1)"/>
</svg></div>

<br/>丝印层: <a href="javascript:void(0);" onclick="saveSVGAsPNG('svg4', '丝印层.jpg');" >导出图片</a><br/>
<div id="svg4"><svg  width="1000px" height="450px" style="border: 0px solid red; margin: 0px;">
    <rect width="100%" height="100%" style="fill:#FFF"/>
    <circle cx="0" cy="0" r="6" fill="black" />
    <circle cx="0" cy="450" r="6" fill="black" />
    <circle cx="1000" cy="0" r="6" fill="black" />
    <circle cx="1000" cy="450" r="6" fill="black" />

    <!-- 丝印层 -->
    <!-- 丝印层 头像 -->
    <circle cx="500" cy="240" r="145"  mask="url(#xy)"/>

    <text text-anchor="middle" x="250" y="419" font-size="25">USD 20</text>
    <text text-anchor="middle" x="750" y="419" font-size="25">USD 20</text>
    <text text-anchor="middle" x="250" y="50" font-size="25">USD 20</text>
    <text text-anchor="middle" x="750" y="50" font-size="25">USD 20</text>

    <text text-anchor="middle" x="500" y="85" font-size="30">THE UNITED STATES OF AMERICA</text>
    <text x="70" y="120" font-size="16">THIS NOTE IS LEGAL TENDER</text>
    <text x="70" y="140" font-size="16">
        FOR ALL DEBTS,PUBLIC AND PRIVATE</text>
    <text x="750" y="140" font-size="25">LB 14285700T</text>
    <text x="80" y="340" font-size="25">pengfei L</text>
    <text x="750" y="340" font-size="25">Joh W Snow</text>
</svg></div>

<script>
    /**
     * 添加斜纹
     **/
    window.onload=function(){
      var element = document.getElementById('yk');
      var x = '';
      for (let i = -40; i <= 80; i++) {
      // 向该元素添加HTML内容
      x += '<line x1="'+(500+i*15)+'" y1="0" x2="'+(0+i*15)+'" y2="500"  style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)" fill="black"/>';
      }
      element.innerHTML = element.innerHTML+x;
    }
    /**
     * 导出图片
     **/
    function saveSVGAsPNG(svgId, fileName) {
      var element;
      if(!svgId) {
        // 使用nextElementSibling获取下一个div元素
        var nextDiv = this.nextElementSibling;
        // 检查下一个元素是否是div，如果不是，则继续查找下一个兄弟元素
        while (nextDiv && nextDiv.tagName !== 'SVG') {
          element = nextDiv.nextElementSibling;
        }
      } else {
        element = document.getElementById(svgId);
      }

        // 创建一个Canvas元素
        const canvas = document.createElement('canvas');
        const scale = 2; // 放大倍数，可以根据需要调整

        // 设置Canvas尺寸
        canvas.width = element.offsetWidth * scale;
        canvas.height = element.offsetHeight * scale;
        const ctx = canvas.getContext('2d');

        // 将元素绘制到Canvas上
        ctx.scale(scale, scale);
        const opts = {
            useCORS: true, // 【重要】开启跨域配置
            allowTaint: true,//允许跨域图片
            taintTest: false,//是否在渲染前测试图片
            scale: 1, // 设备像素比，可以使用window.devicePixelRatio
            backgroundColor: null, // 背景颜色，可以根据需要调整
            width: element.offsetWidth, // 导出内容的宽度
            height: element.offsetHeight, // 导出内容的高度
            scrollX: -element.scrollLeft, // 滚动位置
            scrollY: -element.scrollTop
        };

        // 使用html2canvas库进行渲染
        html2canvas(element, opts).then(canvas => {
            // 创建一个图片元素
            const img = new Image();
            img.src = canvas.toDataURL('image/png');
            // 创建一个链接元素用于下载
            const link = document.createElement('a');
            link.href = img.src;
            link.download = fileName || 'screenshot.png';
            // 模拟点击触发下载
            link.click();
        });
    }
</script>
</body>
</html>
